<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue2.0.js"></script>
    <script src="vue-router.js"></script>

    <style>
        .router-link-active{
            font-size: 20px;
            color: #00ee00;
        }
    </style>
</head>
<body>

<div id="app">
    <input type="button" value="替换路由" @click="change">
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>

    <br>
    <router-view></router-view>

</div>

<script>
    var Home = {
        template:'<h3>我是主页</h3>'
    }

    var User = {
        template:'<div><h3>我是用户</h3><router-link to="/user/frq/age/10">frq</router-link>' +
        '<router-link to="/user/pyf/age/20">pyf</router-link>' +
        '<router-link to="/user/cbz/age/30">cbz</router-link>' +
        '<div><router-view></router-view></div></div>'
    }

    var userDetail = {
        template:'<div>{{$route.params}}</div>'
    }



//    生成路由
    var routes=[
        {path:'/home',component:Home},
        {path:'/user',component:User,
            children:[
                {path:':username/age/:age',component:userDetail}
            ]
        },
        {path:'*',redirect:'/home'}

    ]

    var router = new VueRouter({
        routes:routes
    })

    new Vue({
        el:'#app',
        router:router,
        methods:{
            change(){
                router.replace({path:'/home'})
            }
        }
    })
</script>

</body>
</html>